<template>
	<view class="page">
		<scroll-view class="page-scroll" :scroll-y="true" @scroll="pageScroll">
			<view class="nav-section">
				<image class="nav-bg-img" :src="navBgImageConfig" mode="widthFix"></image>
				
				<view class="nav-bar-placeholder" :style="{height: navBarHeight + 'px'}"></view>
				
				<view class="user-section">
					<view class="user-info">
						<image class="avatar" :src="userInfo.headimg" mode="" @click="goUserInfoEdit()"></image>
						<text class="nickname">{{userInfo.nickname}}</text>
					</view>
					<view class="user-track">
						<view class="concern-item" @click="goToIntegralDetail">
							<text class="concern-title">{{userInfo.integral}}</text>
							<text class="concern-subtitle">积分</text>
						</view>
						<view class="concern-item" @click="goToBalanceDetail">
							<text class="concern-title">{{userInfo.money}}</text>
							<text class="concern-subtitle">余额</text>
						</view>
						<view class="concern-item" @click="goToCommissionDetail">
							<text class="concern-title">{{userInfo.profit}}</text>
							<text class="concern-subtitle">佣金</text>
						</view>
						<view class="concern-item" @click="goToUserRecommendList">
							<text class="concern-title">{{userInfo.recommender_number}}人</text>
							<text class="concern-subtitle">推荐</text>
						</view>
					</view>
					<view class="certification" v-if="userInfo.id_is_auth==0">
						<navigator url="/pages/ucenter/id/id-auth" class="flex flex-align-center">
						<tpf-icon :fontFamily="certConfig.fontFamily" :text="certConfig.icon.text"></tpf-icon>
						<text>{{certConfig.text}}</text>
						</navigator>
					</view>
				</view>
			</view>
			
			<view class="order-section">
				<navigator class="order-item" hover-class="none" v-for="(icon, iconIndex) of orderSectionConfig.iconList" :key="iconIndex" :url="icon.url">
					<tpf-icon :fontFamily="orderSectionConfig.fontFamily" :text="icon.text" :textStyle="orderSectionConfig.textStyle + ';' + icon.textStyle" :title="icon.title" :titleStyle="orderSectionConfig.titleStyle" :subtitle="icon.subtitle" :subtitleStyle="orderSectionConfig.subtitleStyle"></tpf-icon>
				</navigator>
			</view>
			
			<view class="service-section">
				<view class="service-label">
					<view class="service-title">直播服务</view>
					<view class="more">
						<navigator url="/pages/live/agreement/agreement">
						<text class="more-text">查看协议</text>
						<text class="more-icon" :style="{'font-family': 'tpf-iconfont'}">&#xe605;</text>
						</navigator>
					</view>
				</view>
				
				<view class="service-list">
					<uni-grid :showBorder="false" :square="false" :highlight="false" :column="4">
						<uni-grid-item v-for="(icon, iconIndex) of liveIconList" :key="iconIndex">
							<navigator class="service-item" hover-class="none" :url="icon.url">
								<tpf-icon :fontFamily="liveListConfig.fontFamily" :thumb="icon.thumb" :thumbStyle="liveListConfig.thumbStyle"  :title="icon.title" :titleStyle="liveListConfig.titleStyle" :subtitle="icon.subtitle" :subtitleStyle="liveListConfig.subtitleStyle"></tpf-icon>
							</navigator>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			
			<view class="ucenter-ext-section">
				<navigator class="ucenter-ext-item flex flex-align-center flex-pack-justify" v-for="(icon,iconIndex) of extListConfig.iconList" :key="iconIndex" hover-class="none" :url="icon.url">
					<tpf-icon :fontFamily="extListConfig.fontFamily" :text="icon.text" :title="icon.title" :vertical="false" :titleStyle="extListConfig.titleStyle"></tpf-icon>
					<tpf-icon :fontFamily="extListConfig.fontFamily" :text="extListConfig.moreIcon.text"></tpf-icon>
				</navigator>
			</view>
		
			<!-- 推荐 -->
			<view class="recommended">
				<view class="recommended-product-list-title">
					<tpf-icon :fontFamily="recommendedProductListTitleConfig.lineIcon.fontFamily" :text="recommendedProductListTitleConfig.lineIcon.text" :textStyle="recommendedProductListTitleConfig.lineIcon.textStyle"></tpf-icon>
					<tpf-icon :vertical="false" :fontFamily="recommendedProductListTitleConfig.recommendIcon.fontFamily" :thumb="recommendedProductListTitleConfig.recommendIcon.thumb" :title="recommendedProductListTitleConfig.recommendIcon.title" :iconStyle="recommendedProductListTitleConfig.recommendIcon.iconStyle" :titleStyle="recommendedProductListTitleConfig.recommendIcon.titleStyle"></tpf-icon>
					<tpf-icon :fontFamily="recommendedProductListTitleConfig.lineIcon.fontFamily" :text="recommendedProductListTitleConfig.lineIcon.text" :textStyle="recommendedProductListTitleConfig.lineIcon.textStyle"></tpf-icon>
				</view>
				
				<tpl-product-list class="recommended-product-list" :columnCount="recommendedProductListConfig.columnCount" :columnGap="recommendedProductListConfig.columnGap" :rowGap="recommendedProductListConfig.rowGap" :leftGap="recommendedProductListConfig.leftGap" :rightGap="recommendedProductListConfig.rightGap" :productList="recommendedProductList"></tpl-product-list>
			</view>
		</scroll-view>
		
		<view class="nav-bar">
			<tpf-nav-bar status-bar hasTitle :fixedHeight="navBarConfig.fixedHeight" @getNavBarMaxHeight="getNavBarHeight">
				<view class="nav-bar-bg" :style="{opacity: navBarBgOacity}"></view>
				
				<view class="nav-bar-left" slot="left" v-if="navBarLeftShow">
					<image class="nav-bar-left-avatar" :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="nav-bar-title" slot="title" v-if="navBarTitleShow">
					
					<text class="nav-bar-title-text">我的</text>
				</view>
				<view class="nav-bar-right" slot="right">
					<navigator class="nav-bar-right-icon" v-for="(icon, iconIndex) of navBarConfig.right.iconList" :key="iconIndex" :url="icon.url">
						<text class="nav-bar-right-text" :style="{'font-family': navBarConfig.right.fontFamily, 'font-size': icon.textSize, color: navBarRightIconColor}">{{icon.text}}</text>
					</navigator>
				</view>
			</tpf-nav-bar>
		</view>
	</view>
</template>

<script>
	import initConfig from '@/mixins/home/user/user.js';
	import data from '@/data/home/user/user.js';
	import style from '@/common/js/style.js';
	
	export default {
		mixins: [initConfig],
		data() {
			return {
				navBarBgOacity: 0,
				navBarLeftShow: false,
				navBarTitleShow: false,
				navBarRightIconColor: style.UNI_TEXT_COLOR_WHITE,
				
				isauth : false,
				liveIconList:[],
				
				navBarHeight: 0,
				userInfo: {},
				
				//为你推荐
				recommendedProductList: [],
			}
		},
		async created() { 
			const userInfoData = data.userInfo();
			const recommendedProductListData = data.recommendedProductList();
			
			this.userInfo = await userInfoData;
			this.recommendedProductList = await recommendedProductListData;
			
			this.liveIconList = this.userInfo.is_anchor?this.liveListConfig.checkedIconList:this.liveListConfig.checkIconList;
		},
		methods: {
			pageScroll(e) {
				const scrollTop = e.detail.scrollTop;
				
				const threshold = 200;
				this.navBarBgOacity =this.$Helper.between(scrollTop/threshold, 0, 1);
				this.navBarLeftShow = scrollTop > threshold*0.5 ? true : false;
				this.navBarTitleShow = scrollTop > threshold*0.5 ? true : false;
				this.navBarRightIconColor = scrollTop > threshold*0.5 ? style.UNI_TEXT_COLOR : style.UNI_TEXT_COLOR_WHITE;
			},
			
			getNavBarHeight(e) {
				this.navBarHeight = e;
			},
			goUserInfoEdit() {
				uni.navigateTo({url: '/pages/ucenter/user-info-edit/user-info-edit'});
			},
			goToUserRecommendList() {
				uni.navigateTo({url: '/pages/ucenter/recommend-list/recommend-list'});
			},
			goToCommissionDetail() {
				uni.navigateTo({url: '/pages/ucenter/commission-statistic/commission-statistic'});
			},
			goToBalanceDetail() {
				uni.navigateTo({url: '/pages/ucenter/balance-detail/balance-detail'});
			},
			goToIntegralDetail() {
				uni.navigateTo({url: '/pages/ucenter/integral-detail/integral-detail'});
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.page-scroll {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	 
	.nav-section {
		overflow: hidden;
		position: relative;
		background:linear-gradient(90deg,#eb3c3c,#ff7459);
	}
	.nav-bg-img {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		
		width: 750rpx;
	}
	
	.nav-bar {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
	}
	.nav-bar-bg {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: $uni-bg-color;
	}
	.nav-bar-left {
		
	}
	.nav-bar-left-avatar {
		width: $uni-icon-size-base;
		height: $uni-icon-size-base;
		border-radius: $uni-border-radius-circle;
		
		margin-left: $uni-spacing-col-base;
	}
	.nav-bar-title {
		
	}
	.nav-bar-title-text {
		font-size: $uni-font-size-hg;
	}
	.nav-bar-right {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.nav-bar-right-icon {
		margin-right: $uni-spacing-col-base;
	}
	.nav-bar-right-text {
		font-size: $uni-icon-size-sm;
	}	
	.user-section {
		position: relative;
	}
	.user-info {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		margin-left: $uni-spacing-col-lg;
		margin-right: $uni-spacing-col-lg;
	}
	.avatar {
		width: $uni-icon-size-lg;
		height: $uni-icon-size-lg;
		border-radius: $uni-border-radius-circle;
		border-width: 2px;
		border-style: solid;
		border-color: #FFF;
	}
	.nickname {
		font-size: $uni-font-size-lg;
		margin-left: $uni-spacing-col-base;
		color: $uni-text-color-white;
	}
	
	.user-track {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		
		margin-top: $uni-spacing-row-base;
		margin-bottom: $uni-spacing-row-base;
		margin-left: $uni-spacing-col-lg;
		margin-right: $uni-spacing-col-lg;
	}
	.concern-item {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
	}
	.concern-title {
		font-size: $uni-font-size-lg;
		font-weight: bold;
		color: $uni-text-color-white;
	}
	.concern-subtitle {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-white;
	}
	
	.order-section {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		margin-top: $uni-spacing-row-base;
		padding-top: $uni-spacing-row-base;
		padding-bottom: $uni-spacing-row-base;
		padding-left: $uni-spacing-col-lg;
		padding-right: $uni-spacing-col-lg;
		background-color: $uni-bg-color;
		border-radius: $uni-border-radius-base;
	}
	.order-item {
		
	}
	
	.more {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.more-text {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}
	.more-icon {
		font-size: $uni-font-size-mi;
		color: $uni-text-color-grey;
		font-weight: bold;
		margin-left: $uni-spacing-col-mi;
	}
	.service-section {
		background-color: $uni-bg-color;
		margin-top: $uni-spacing-row-base;
		border-radius: $uni-border-radius-base;
	}
	.service-label {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		padding-top: $uni-spacing-row-base;
		padding-bottom: $uni-spacing-row-base;
		padding-left: $uni-spacing-col-base;
		padding-right: $uni-spacing-col-base;
		border-bottom-width: 0.5px;
		border-bottom-style: solid;
		border-bottom-color: $uni-border-color;
	}
	.service-title {
		font-size: $uni-font-size-base;
		// font-weight: bold;
	}
	
	.service-list {
		
	}
	.service-item {
		margin-bottom: $uni-spacing-row-base;
		margin-top: $uni-spacing-row-base;
	}
	.certification{
		position: absolute;
		right: 0;
		top: 0;
		color: #FFF;
		font-size: $uni-font-size-base;
		background-color:#ff795b;
		padding:10rpx 20rpx;
		border-bottom-left-radius: 50rpx;
		border-top-left-radius: 50rpx;
	}
	
	// 推荐
	.recommended-product-list-title {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		margin-top: $uni-spacing-row-base;
	}
	.recommended-product-list {
		margin-top: $uni-spacing-row-sm;
	}
	.ucenter-ext-section{
		background-color: #FFF;
		margin: 20rpx 0;
		border-style: solid;
		border-color: #dfdfdf;
		border-width: 0px;
		border-radius:20rpx;
	}
	.ucenter-ext-item {
		padding: 20rpx;
		border-bottom-color: #dfdfdf;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.ucenter-ext-section .ucenter-ext-item:last-child{
		border-bottom-style: none;
	}
</style>
